<template>
    <L7Map map-id="my-map" @loaded="handleLoaded" :options="options"></L7Map>
</template>

<script setup lang="ts">
import { Scene, PointLayer } from '@antv/l7'

const options: any = ref({
    pitch: 64.88,
    center: [114.060288, 22.53684],
    zoom: 15.63,
})
const handleLoaded = async (scene: Scene) => {
    // 3d build  
    const data = await fetch('/mapjson/citylight.json').then(res => res.json())
    const pointLayer = new PointLayer({ blend: 'additive' })
        .source(data)
        .size(6)
        .color('h8', [
            '#0A3663',
            '#1558AC',
            '#3771D9',
            '#4D89E5',
            '#64A5D3',
            '#72BED6',
            '#83CED6',
            '#A6E1E0',
            '#B8EFE2',
            '#D7F9F0',
        ]);

    scene.addLayer(pointLayer);
}
</script>
